<template>

    <el-button type="success" class="!ml-0" plain @click="dialogFormVisible = true">
        新增订单
    </el-button>

    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新增订单" width="500">
        <el-form :model="form">
            <el-form-item label="订购商品名称" :label-width="formLabelWidth">
                <el-input v-model="form.orderName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="订购商品数量" :label-width="formLabelWidth">
                <el-input-number v-model="form.orderNumber" :min="100" />
            </el-form-item>
            <el-form-item label="开始时间" :label-width="formLabelWidth">
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker v-model="form.orderCreateDate" type="date" aria-label="选择日期" placeholder="选择日期"
                            style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="结束时间" :label-width="formLabelWidth">
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker v-model="form.orderEndDate" type="date" aria-label="选择日期" placeholder="选择日期"
                            style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="订购商品价格" :label-width="formLabelWidth">
                <el-input v-model="form.orderMoney" autocomplete="off" />
            </el-form-item>
            <el-form-item label="预付款" :label-width="formLabelWidth">
                <el-input v-model="form.orderPay" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addOrder">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 显示 -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="orderName" label="订购商品名称" width="150" />
        <el-table-column prop="orderNumber" label="订购数量" width="100" />
        <el-table-column prop="orderCreateDate" label="开始时间" width="150">
            <template #default="scope">
                {{ moment(scope.row.orderCreateDate).format("YYYY年MM月DD日") }}
            </template>
        </el-table-column>
        <el-table-column prop="orderEndDate" label="结束时间" width="150">
            <template #default="scope">
                {{ moment(scope.row.orderEndDate).format("YYYY年MM月DD日") }}
            </template>
        </el-table-column>
        <el-table-column prop="orderMoney" label="价格" width="80" />
        <el-table-column prop="orderPay" label="预付款" width="100" />
        <el-table-column fixed="right" label="操作" min-width="200">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
                    删除
                </el-button>
                <el-button link type="primary" size="small" @click="UpdateOrder(scope.row)">修改</el-button>
                <el-button link type="primary" size="small" @click="BillData(scope.row)">开票</el-button>
                <el-button link type="primary" size="small" @click="ActiveTicketData(scope.row)">到票</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 修改弹窗 -->
    <el-dialog v-model="dialogFormVisibleUpdate" title="修改订单" width="500">
        <el-form :model="formorder">
            <el-form-item label="订购商品名称" :label-width="formLabelWidth">
                <el-input v-model="formorder.orderName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="订购商品数量" :label-width="formLabelWidth">
                <el-input-number v-model="formorder.orderNumber" :min="100" />
            </el-form-item>
            <el-form-item label="开始时间" :label-width="formLabelWidth">
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker v-model="formorder.orderCreateDate" type="date" aria-label="选择日期"
                            placeholder="选择日期" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="结束时间" :label-width="formLabelWidth">
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker v-model="formorder.orderEndDate" type="date" aria-label="选择日期"
                            placeholder="选择日期" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="订购商品价格" :label-width="formLabelWidth">
                <el-input v-model="formorder.orderMoney" autocomplete="off" />
            </el-form-item>
            <el-form-item label="预付款" :label-width="formLabelWidth">
                <el-input v-model="formorder.orderPay" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisibleUpdate = false">取消</el-button>
                <el-button type="primary" @click="Updatedialog">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 开票弹窗 -->
    <el-dialog v-model="dialogBillVisible" title="开票" width="500">
        <el-form :model="bill">
            <el-form-item label="开票主题" :label-width="formLabelWidth">
                <el-input v-model="bill.billSubject" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="开票类型" :label-width="formLabelWidth">
                <el-radio-group v-model="bill.billType">
                    <el-radio :value="1">已完成</el-radio>
                    <el-radio :value="2">未完成</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="收票方" :label-width="formLabelWidth">
                <el-select v-model="bill.billAccept" placeholder="请选择">
                    <el-option v-for="s in supplier" :label="s.supplierName" :value="s.supplierName" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="bill.billDec" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogBillVisible = false">取消</el-button>
                <el-button type="primary" @click="Addbill">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 发票弹窗 -->
    <el-dialog v-model="dialogActiveVisible" title="发票" width="500">
        <el-form :model="active">
            <el-form-item label="发票主题" :label-width="formLabelWidth">
                <el-input v-model="active.activeSubject" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="发票类型" :label-width="formLabelWidth">
                <el-radio-group v-model="active.activeType">
                    <el-radio :value="1">已完成</el-radio>
                    <el-radio :value="2">未完成</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="收票方" :label-width="formLabelWidth">
                <el-select v-model="active.activeAccept" placeholder="请选择">
                    <el-option v-for="c in customer" :label="c.customerName" :value="c.customerName" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="active.activeDec" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogActiveVisible = false">取消</el-button>
                <el-button type="primary" @click="AddActiveTicket">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>

import Eaxios from '@/Http/ErpHelp';
import Maxios from '@/Http/MesHelp';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { onMounted, ref, watch } from 'vue';

const dialogFormVisible = ref(false)
const dialogFormVisibleUpdate = ref(false)
const dialogBillVisible = ref(false)
const dialogActiveVisible = ref(false)
const formLabelWidth = '140px'

const form = ref({
    orderName: "",
    orderNumber: 0,
    orderCreateDate: "",
    orderEndDate: "",
    orderMoney: "",
    orderPay: ""
})

// 自动计算预付款（当数量或价格无效时显示为空）
watch([() => form.value.orderNumber, () => form.value.orderMoney], ([newNumber, newMoney]) => {
    const hasQuantity = typeof newNumber === 'number' && newNumber > 0;
    const price = parseFloat(newMoney as unknown as string);
    const hasPrice = !Number.isNaN(price) && newMoney !== '';
    form.value.orderPay = hasQuantity && hasPrice ? (newNumber * price).toString() : '';
})

const tableData = ref([])

//添加
const addOrder = () => {
    Eaxios.post("/api/Order/AddOrder", form.value).then(res => {
        if (res.data.code == 10200) {
            ElMessage.success(res.data.message)
        }
        else {
            ElMessage.error(res.data.message)
        }
    })
    dialogFormVisible.value = false
    list()
}

//删除
const handleClick = (val: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '逻辑删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            Eaxios.post("/api/Order/DeleteOrder", { id: val }).then(res => {
                if (res.data.code == 10200) {
                    ElMessage.success(res.data.message)
                }
                else {
                    ElMessage.error(res.data.message)
                }
                list()
            })
        })

}

//显示
const list = () => {
    Eaxios.get("/api/Order/ListOrder").then(res => {
        tableData.value = res.data.data
    })
}

const formorder = ref({
    id: "",
    orderName: "",
    orderNumber: 0,
    orderCreateDate: "",
    orderEndDate: "",
    orderMoney: "",
    orderPay: ""
})
//修改反填
const UpdateOrder = (row: any) => {
    formorder.value.id = row.id
    formorder.value.orderName = row.orderName
    formorder.value.orderNumber = row.orderNumber
    formorder.value.orderCreateDate = row.orderCreateDate
    formorder.value.orderEndDate = row.orderEndDate
    formorder.value.orderMoney = row.orderMoney
    formorder.value.orderPay = row.orderPay
    console.log(formorder.value)
    dialogFormVisibleUpdate.value = true
}

//修改
const Updatedialog = () => {
    Eaxios.post("/api/Order/UpdateOrder", formorder.value).then(res => {
        if (res.data.code == 10200) {
            ElMessage.success(res.data.message)
        }
        else {
            ElMessage.error(res.data.message)
        }
        dialogFormVisibleUpdate.value = false
        list()
    })
}

const bill = ref({
    "billSubject": "",
    "billType": 0,
    "orderId": 0,
    "billAccept": "",
    "billDec": ""
})

const BillData = (row: any) => {
    bill.value.billSubject = row.orderName
    bill.value.orderId = row.id;
    dialogBillVisible.value = true
}

const Addbill = () => {
    Eaxios.post("/api/Ticket/AddBill", bill.value).then(res => {
        if (res.data.code == 10200) {
            ElMessage.success(res.data.message)
        }
        else {
            ElMessage.error(res.data.message)
        }
        list()
    })
}

const active = ref({
    "activeSubject": "",
    "activeType": 0,
    "orderId": 0,
    "activeAccept": "",
    "activeDec": ""
})

const ActiveTicketData = (row: any) => {
    active.value.activeSubject = row.orderName
    active.value.orderId = row.id;
    dialogActiveVisible.value = true
}

const AddActiveTicket = () => {
    Eaxios.post("api/Ticket/AddActiveTic", active.value).then(res => {
        if (res.data.code == 10200) {
            ElMessage.success(res.data.message)
        }
        else {
            ElMessage.error(res.data.message)
        }
        list()
    })
}

const supplier = ref([{
    "id": 0,
    "supplierCode": "",
    "supplierName": "",
    "supAbbreviation": "",
    "supplierPhone": "",
    "supplierAddress": "",
    "supplierUnified": "",
    "supplierMsg": "",
    "addProp": "",
    "addTime": "",
    "updProp": "",
    "updTime": ""
}])

const supage = ref({
    Pageindex: 1,
    Pagesize: 20
})

const supplierData = () => {
    Maxios.get("/api/Supplier/ListSupplier", { params: supage.value }).then(res => {
        supplier.value = res.data.data.list
    })
}

const customer = ref([{
    "id": 0,
    "customerCode": "",
    "customerName": "",
    "cusAbbreviation": "",
    "customerPhone": "",
    "customerAddress": "",
    "customerUnified": "",
    "customerMsg": "",
    "addProp": "",
    "addTime": "",
    "updProp": "",
    "updTime": ""
}])

const customerpage = ref({
    Pageindex: 1,
    Pagesize: 20
})

const customerData = () => {
    Maxios.get("/api/Supplier/ListCustomer", { params: customerpage.value }).then(res => {
        customer.value = res.data.data.list
    })
}

onMounted(() => {
    list()
    supplierData()
    customerData()
})

</script>
